<template>
  <div>
    <h2>房间号的增加--成功</h2>
    <table class="table table-bordered">
      <tr>
        <td align="right">房间号</td>
        <td>
          <input type="text" v-model="state.hnName" />
        </td>
      </tr>
      <tr>
        <td align="right">房型</td>
        <td>
          <select v-model="state.hTypeId">
            <option value="">请选择房型</option>
            <option :value="item.hTypeId" v-for="item in list">
              {{ item.hTypeName }}
            </option>
          </select>
        </td>
      </tr>
      <tr>
        <td align="right"></td>
        <td>
          <input type="button" value="增加" @click="ok" />
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';

const route = useRoute();
const router = useRouter();

let data: any = reactive({
  list: [],
  state: {
    hnName: '',
    hTypeId: ''
  }
});

let { list, state } = toRefs(data);

onMounted(() => {
  getList();
});

//增加

const ok = () => {
  //1.非空+有效
  //2.发送网络请求
  let obj = {
    hnName: state.value.hnName,
    hTypeId: state.value.hTypeId,
  };
  axios({
    url: '/api/Test/PostAddHouseNo',
    method: 'post',
    data: obj
  })
    .then((res) => {
      console.log(res);
      if(res.data.data == 1){
        alert("添加成功");
        router.push("/houseNoList")
      }else if(res.data.data == -1){
        alert("房间号重复");
        return
      }else{
        alert("添加失败");
        return
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

//获取所有的房型
const getList = () => {
  let obj = {
    pageIndex: 1,
    pageSize: 100
  };
  axios({
    url: '/api/Test/GetHouseTypes',
    method: 'get',
    params: obj
  })
    .then((res) => {
      console.log(res);
      list.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
